<template>
	<view class="page-box">
		<view class="order" v-for="(orderItem, index) in list" :key="index">
			<view class="order-item" @click="actionOrder(orderItem.id,orderItem.status)">
				<view class="title u-border-bottom" v-if="orderItem.user_info">
					<view class="avatar">
						<u-avatar :src="orderItem.user_info.avatar" size="80" :show-level="orderItem.user_info.is_power==1"
							:level-bg-color="$appConfig.mainColor"></u-avatar>
					</view>
					<view class="font-medium u-flex-1"><text>{{orderItem.user_info.nickname}}</text></view>
					<text class="u-light-color">{{orderItem.refusal || orderItem.status_name}}</text>
				</view>

				<view class="order-content">
					<view class="u-flex-1">
						<text class="u-font-32 font-medium">{{orderItem.title}}</text>
					</view>
					<view class="order-price u-font-20">
						<text class="u-font-32 price">{{orderItem.price}}</text>
					</view>
				</view>

				<view class="order-action">
					<view>
						<u-button :customStyle="customBtnStyle" size="mini" shape="circle" hover-class="none" class="u-m-l-20"
							v-if="[-1,-2,-3].includes(orderItem.status)" @click="deleteOrder(orderItem.id)">删除订单</u-button>

						<u-button plain size="mini" shape="circle" hover-class="none" class="u-m-l-20" :customStyle="customBtnStyle"
							v-if="[0,-4].includes(orderItem.status)" @click="actionOrder(orderItem.id)">拒绝</u-button>

						<u-button :customStyle="customBtnStyle" size="mini" shape="circle" hover-class="none" class="u-m-l-20"
							v-if="[1,4,-4,-5,-6].includes(orderItem.status)" @click="actionOrder(orderItem.id)">查看详情</u-button>

						<u-button type="primary" size="mini" plain shape="circle" hover-class="none" class="u-m-l-20"
							v-if="orderItem.status==0" :customStyle="{backgroundColor:'#ffffff !important'}"
							@click="actionOrder(orderItem.id)">接受预约</u-button>
						<u-button type="primary" size="mini" plain shape="circle" hover-class="none" class="u-m-l-20"
							v-if="orderItem.status==2" :customStyle="{backgroundColor:'#ffffff !important'}"
							@click="actionOrder(orderItem.id)">确认见面</u-button>
						<u-button type="primary" size="mini" plain shape="circle" hover-class="none" class="u-m-l-20"
							v-if="orderItem.status==3" :customStyle="{backgroundColor:'#ffffff !important'}"
							@click="actionOrder(orderItem.id)">交付服务</u-button>
						<u-button type="primary" size="mini" plain shape="circle" hover-class="none" class="u-m-l-20"
							v-if="orderItem.status==5&&!orderItem.is_power_reply"
							:customStyle="{backgroundColor:'#ffffff !important'}" @click="toEvaluate(orderItem.id)">去评价</u-button>
						<u-button size="mini" plain shape="circle" hover-class="none" class="u-m-l-20"
							v-if="orderItem.status==5&&orderItem.is_power_reply" :customStyle="{backgroundColor:'#ffffff !important'}"
							@click="toEvaluateView(orderItem.id)">查看评价</u-button>
					</view>
				</view>
			</view>
		</view>
		<u-modal v-model="deletelModal" @confirm="deleteHandle" ref="deletelModal" :async-close="true" content="确定要删除该订单吗？"
			show-cancel-button :confirm-color="$appConfig.mainColor" z-index="9999"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customBtnStyle: {
					borderColor: "#cccccc",
					color: '#666666'
				},
				deletelModal: false,
				currentId: ''
			}
		},
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},

		methods: {
			actionOrder(id, status = 0) {
				if (status < 0 && status > -4) {
					this.$u.toast("订单已失效")
					return
				}
				this.$u.route('/pages/subpage/order/action', {
					id,
					type: 'order',
					role: 'power'
				})
			},
			deleteOrder(id) {
				this.currentId = id;
				this.deletelModal = true;
			},
			deleteHandle() {
				this.$u.api.deleteOrder(this.currentId).then(res => {
					this.$u.toast('订单已删除')
					this.deletelModal = false
					this.$emit('change')
				})
			},
			// 评价
			toEvaluate(id) {
				this.$u.route('/pages/subpage/order/evaluate', {
					id,
					role: 'power'
				})
			},
			// 查看评价
			toEvaluateView(id) {
				this.$u.route('/pages/subpage/order/comments', {
					id,
					role: 'power'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-box {
		padding: 30rpx;

		.order {
			margin-bottom: 30rpx;
		}
	}

	.order-item {
		background-color: #fff;
		border-radius: 20rpx;

		.title {
			height: 70rpx;
			display: flex;
			align-items: center;
			padding-right: 30rpx;

			.avatar {
				transform: scale(0.6);
			}
		}

		.order-content {
			display: flex;
			padding: 22rpx 13rpx 32rpx 18rpx;

			&:before {
				content: "";
				display: inline-block;
				width: 8rpx;
				height: 8rpx;
				border-radius: 50%;
				background-color: $u-tips-color;
				margin-right: 17rpx;
				margin-top: 20rpx;
			}

			.order-price {
				min-width: 130rpx;
				text-align: right;
			}
		}

		.order-action {
			display: flex;
			justify-content: flex-end;
			flex-wrap: wrap;
			padding: 0 32rpx 32rpx;

			.u-button {
				margin-left: 20rpx;
			}
		}
	}
</style>